<template>
	<div>
		<!-- 抽屉 -->
		<el-drawer title="" :visible.sync="drawer" :direction="direction" size="80%">
			<el-row>
				<el-col :span="22" :offset="1">
					<div>
						<template>
							<el-table :data="proMaterials" stripe style="width: 100%">
								<el-table-column prop="pId" label="物料编号">
								</el-table-column>
								<el-table-column prop="pName" label="物料名称">
								</el-table-column>
								<el-table-column prop="typeName" label="用途类型">
								</el-table-column>
								<el-table-column prop="projName" label="物料描述">
								</el-table-column>
								<el-table-column prop="unit" label="单位">
								</el-table-column>
								<el-table-column prop="price" label="计划成品单价">
								</el-table-column>
								<el-table-column fixed="right" label="添加" width="100">
									<template slot-scope="scope">
										<el-button type="primary" size="mini" @click="additionMaterial(scope.row)">添加</el-button>
									</template>
								</el-table-column>
							</el-table>
						</template>
						<template>
							<!--@size-change：当条数发现改变时触发-->
							<!--@current-change：当页码发生改变时触发-->
							<el-pagination style="margin-top: 5px;" layout="sizes, prev, pager, next, jumper, ->, total" :total="total2"
							 :page-size.sync="pageSize2" :page-sizes="pageSizes2" :current-page.sync="currentPage2" :pager-count="pagerCount2"
							 background @size-change="handleSizeChange2" @current-change="handleCurrentChange2">
							</el-pagination>
						</template>
					</div>
				</el-col>
			</el-row>
		</el-drawer>
		<!-- 模态框 -->
		<el-dialog :visible.sync="dialogVisible" top="25px" width="90%" :before-close="handleClose">
			<div style="box-shadow: 0 10px 10px rgba(132, 172, 232, .12), 0 0 6px rgba(132, 172, 232, .04)">
				<div align="center">
					<h2>物料组成设计单</h2>
				</div>
				<div>
					<el-form ref="form" id="form">
						<el-row>
							<el-col :span="10" :offset="1">
								<el-form-item label="产品名称：" label-width="110px">
									<span>{{theProductName}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="10" :offset="2">
								<el-form-item label="产品编号：" label-width="110px">
									<span>{{fileNumber}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="10" :offset="1" style="margin-top: 10px;">
								<el-form-item label="设计人：" size="mini"   label-width="95px">
									<el-input v-model="designer"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="22" :offset="1">
								<template>
									<el-table :data="materials" stripe style="width: 100%" @selection-change="handleSelectionChang">
										<el-table-column header-align="center" align="center" type="selection"></el-table-column>
										<el-table-column prop="pId" label="物料编号">
										</el-table-column>
										<el-table-column prop="pName" label="物料名称">
										</el-table-column>
										<el-table-column prop="typeName" label="用途类型">
										</el-table-column>
										<el-table-column prop="projName" label="描述">
										</el-table-column>
										<el-table-column prop="num" label="数量">
                      						<template slot-scope="scope">
                        						<el-input size="small" v-model="scope.row.num" @input="modifiedSubtotal(scope.row)"></el-input>
                      						</template>
                    					</el-table-column>
										<el-table-column prop="unit" label="单位">
										</el-table-column>
										<el-table-column prop="price" label="计划成本单价（元）">
										</el-table-column>
										<el-table-column prop="subtotal" label="小计（元）">
										</el-table-column>
									</el-table>
								</template>
								<br>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10" :offset="1">
								<el-form-item label="登记人：" size="mini" label-width="110px">
									<el-input v-model="registrant"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="10" :offset="2">
								<el-form-item label="登记时间:" label-width="110px">
									<span>{{registrationTime}}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="22" :offset="1">
								<el-form-item label="设计要求:" label-width="110px">
									<el-input resize="none" type="textarea" :rows="4" v-model="designRequirements" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="openDrawerAndSelectproMaterials()">添加物料</el-button>
				<el-button type="danger" @click="deleteTheMaterial()">删除物料</el-button>
				<el-button type="primary" @click="developDesignSheet()">提交</el-button>
			</span>
		</el-dialog>
		<!-- 主题 -->
		<el-container>
			<el-header>
				<el-row>
					<el-col :span="24">
						<div class="reCheckProductSumClass">
							符合条件的产品档案总数 ：{{reCheckProductSum}}例
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-main style="height: 475px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px;">
				<div>
					<template>
						<el-table :data="ProInformations" stripe style="width: 100%">
							<el-table-column prop="pId" label="产品编号">
							</el-table-column>
							<el-table-column prop="pName" label="产品名称">
							</el-table-column>
							<el-table-column prop="typeName" label="用途类型">
							</el-table-column>
							<el-table-column prop="oneClassifyName" label="I级分类">
							</el-table-column>
							<el-table-column prop="twoClassifyName" label="II级分类">
							</el-table-column>
							<el-table-column prop="threeClassifyName" label="III级分类">
							</el-table-column>
							<el-table-column prop="levelName" label="产品档次">
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="120">
								<template slot-scope="scope">
									<el-button type="primary" size="mini" @click="openModalBoxBindingMessage(scope.row)">制定设计单</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
					<template>
						<!--@size-change：当条数发现改变时触发-->
						<!--@current-change：当页码发生改变时触发-->
						<el-pagination style="margin-top: 5px;" layout="sizes, prev, pager, next, jumper, ->, total" :total="total"
						 :page-size.sync="pageSize" :page-sizes="pageSizes" :current-page.sync="currentPage" :pager-count="pagerCount"
						 background @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</template>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'makeTheMaterialCompositionDesignList',
		data() {
			return {
				/* 当前时间 */
				nowTime: '',
				/* 总条数 */
				reCheckProductSum: 4,
				/* 存储产品已审核并且产品类型为商品 */
				ProInformations: [],
				/* 存储产品类型为物料的全部信息 */
				proMaterials: [],
				/* 分页 */
				total: 500, //总条数
				pageSize: 5, //每页显示多少条
				pageSizes: [2, 3, 5, 7], //每页显示条数候选值
				currentPage: 1, //当前页
				pagerCount: 5, //最多显示的页码，多余的会折叠
				/* 分页2 */
				total2: 500, //总条数
				pageSize2: 5, //每页显示多少条
				pageSizes2: [2, 3, 5, 7], //每页显示条数候选值
				currentPage2: 1, //当前页
				pagerCount2: 5, //最多显示的页码，多余的会折叠
				/* 模态框显示 */
				dialogVisible: false,
				/* 档案编号 */
				fileNumber: '',
				/* 产品名称 */
				theProductName: '',
				/* 设计人 */
				designer: '',
				/* 登记人 */
				registrant: '',
				/* 设计要求 */
				designRequirements: '',
				/* 登记时间 */
				registrationTime: '',
				/* 选择的物料 */
				materials: [],
				/* 用户选择的行的信息,用于删除 */
				selections: [],
				/* 抽屉 */
				drawer: false,
				direction: 'ltr',
			}
		},
		mounted: function() {
			/* 页面加载时启动计时器 */
			this.currentTime();
			/* 查询全部已复核并且产品类型为商品的全部产品信息【带分页】 */
			this.selectAllProInformationByReviewSignAndyongType();
		},
		methods: {
			/* 查询全部已复核并且产品类型为商品的全部产品信息【带分页】 */
			selectAllProInformationByReviewSignAndyongType() {
				/* 查询全部未复核的全部产品信息 */
				this.$http.post("design/proInformation/selectAllProInformationByReviewSignAndyongType", "pageNum=" + this.currentPage +
					"&pageSize=" + this.pageSize).then(res => {
					console.log(res);
					this.ProInformations = res.data.rows
					//总页码设置
					this.total = res.data.total;
				});
			},

			/* 添加物料假信息 */
			additionMaterial(scope){
				var num = 0;
				/* 循环存储物料信息 */
				this.materials.some((item,i) =>{
					if(item.pId == scope.pId){
						num++;
					}
				})
				/* 判断存储物料信息中是否有当前需要添加的物料信息 */
				if(num <= 0){
					this.materials.push(scope);
				}else{
					this.$message.error('你已添加此物料，请不要重新操作');
				}
			},

			/* 打开模态框并绑定数据 */
			openModalBoxBindingMessage(scope) {
				console.log(scope);
				/* 编号 */
				this.fileNumber = scope.pId;
				/* 名称 */
				this.theProductName = scope.pName;
				/* 登记时间 */
				this.registrationTime = this.nowTime;
				/* 登记人 */
				this.registrant = scope.denjiper;
				/* 打开模态框 */
				this.dialogVisible = true;
			},

			/* 关闭模态框抽发事件 */
			handleClose(){
				/* 关闭模态框 */
				this.dialogVisible = false;
				/* 清空存储物料信息 */
				this.materials = [];
			},

			/* 打开抽屉并绑定物料基本信息 */
			openDrawerAndSelectproMaterials(){
				this.selectproMaterials();
				/* 打开抽屉 */
				this.drawer = true;
			},

			/* 查询物料基本信息 */
			selectproMaterials(){
				/* 查找物料基本信息 */
				this.$http.post("design/proInformation/selectProductTypeByMaterials", "pageNum=" + this.currentPage2 +
					"&pageSize=" + this.pageSize2).then(res => {
					this.proMaterials = res.data.rows
					//总页码设置
					this.total2 = res.data.total;
				});
			},

			/* 当数量发生改变时，触发事件 */
			modifiedSubtotal(scope){
				console.log(scope);
				//单价 scope.price
				//数量 scope.num
				if(scope.num != ""){
					scope.subtotal = parseFloat(scope.num) * parseFloat(scope.price);
				}else{
					scope.subtotal = "";
				}
			},

			/* 删除物料基本信息【假数据删除】 */
			deleteTheMaterial(){
				//this.materials	假数据
				console.log(this.selections);
				//循环删除物料基本信息
				this.selections.some((item,i) =>{
					//删除Vue指定元素数组
					this.materials.splice(this.materials.indexOf(item),1);
				})
			},

			/* 制定设计单 */
			developDesignSheet() {
				/* 判断设计单里是否存在物料基本信息 */
				if(this.materials.length <= 0){
					this.$message.warning('必须添加一条物料基本信息，否则不能提交！');
				}else{
					/* 添加产品物料组成设计单 */
					this.$http.post("design/ProWuliaoTab/insertProductMaterialComposition",this.$qs.stringify({
						"pId":this.fileNumber,
						"proName":this.theProductName,
						"list":this.materials
					},{
						arrayFormat: 'list',
						allowDots: true
					}))
					.then(res => {
						if(res.data > 0){
							this.$message.success('制定物料组成设计单成功！');
							/* 刷新 */
							this.selectAllProInformationByReviewSignAndyongType();
						}else{
							this.$message.error('制定物料组成设计单失败！');
							/* 刷新 */
							this.selectAllProInformationByReviewSignAndyongType();
						}
					})
					/* 调用关闭模态框的方法 */
					this.handleClose();
				}
			},

			/* 改变size[每页条数]调用方法*/
			handleSizeChange() {
				/* 只要改变马上调用分页查询 */
				this.selectAllProInformationByReviewSignAndyongType();
			},

			/* 改变page[当前页码]调用方法*/
			handleCurrentChange() {
				/* 只要改变马上调用分页查询 */
				this.selectAllProInformationByReviewSignAndyongType();
			},

			/* 改变size[每页条数]调用方法*/
			handleSizeChange2() {
				/* 只要改变马上调用分页查询 */
				this.selectproMaterials();
			},

			/* 改变page[当前页码]调用方法*/
			handleCurrentChange2() {
				/* 只要改变马上调用分页查询 */
				this.selectproMaterials();
			},

			/* 获取当前用户选择的行 */
			handleSelectionChang(value) {
				this.selections = value;
			},

			/* 定时器 */
			currentTime() { //定时器
				setInterval(this.getDate, 100)
			},

			/* 获取当前时间 */
			getDate() {
				const year = new Date().getFullYear()
				const month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
				const date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
				const hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
				const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
				const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
				const week = new Date().getDay()
				this.nowTime = year + '-' + month + '-' + date + '' + ' ' + hh + ':' + mm + ':' + ss
			}
		},
		// 销毁定时器
		beforeDestroy: function() {
			if (this.getDate) {
				clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
			}
		},
	}
</script>

<style scoped>
	#form .el-form-item {
		background-color: aliceblue;
	}

	/* 页面地址栏显示的背景设置 */
	.bg-9EA4D8 {
		color: #FFFFFF;
		background-color: #A4D1FF;
	}

	.el-header {
		line-height: 40px;
		background-color: #333333;
	}

	.reCheckProductSumClass {
		font-size: 13px;
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-input__inner {
		color: #0000FF;
	}
</style>
